<template>
    <div class="login-page">
      <div class="header">
        <el-icon class="back-icon" @click="$router.back()"><ArrowLeft /></el-icon>
        <span class="header-title">国家智慧教育公共服务平台</span>
      </div>
  
      <div class="login-container">
        <div class="logo-section">
          <img src="https://dummyimage.com/80x80/4a90e2/fff&text=智慧" class="logo" alt="logo"/>
          <div class="logo-text">智教中国通行证</div>
        </div>
  
        <div class="login-form">
          <el-input
            v-model="loginForm.username"
            placeholder="请输入通行证ID/手机号/学生号"
            class="login-input"
            :prefix-icon="User"
          />
          <el-input
            v-model="loginForm.password"
            type="password"
            placeholder="请输入密码"
            class="login-input"
            :prefix-icon="Lock"
            :show-password="true"
          />
  
          <div class="agreement">
            <el-checkbox v-model="loginForm.agreement" class="agreement-checkbox">
              <span class="agreement-text">
                我已阅读并同意
                <span class="link">用户协议</span>、
                <span class="link">隐私政策</span>、
                <span class="link">免责声明</span>
              </span>
            </el-checkbox>
          </div>
  
          <el-button type="primary" class="login-button" @click="handleLogin">
            登录
          </el-button>
  
          <div class="action-links">
            <span class="link">注册通行证</span>
            <span class="divider">|</span>
            <span class="link">找回密码</span>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive } from 'vue'
  import { useRouter } from 'vue-router'
  import { ArrowLeft, User, Lock } from '@element-plus/icons-vue'
  import { ElMessage } from 'element-plus'
  
  const router = useRouter()
  
  const loginForm = reactive({
    username: '',
    password: '',
    agreement: false
  })
  
  const handleLogin = () => {
    if (!loginForm.username || !loginForm.password) {
      ElMessage.warning('请输入账号和密码')
      return
    }
    if (!loginForm.agreement) {
      ElMessage.warning('请阅读并同意用户协议')
      return
    }
    
    // 这里模拟登录成功
    localStorage.setItem('isLoggedIn', 'true')
    router.push('/')
  }
  </script>
  
  <style scoped>
  .login-page {
    min-height: 100vh;
    background: #f5f7fa;
    position: relative;
  }
  
  .header {
    display: flex;
    align-items: center;
    padding: 4vw;
    background: #fff;
  }
  
  .back-icon {
    font-size: 5vw;
    margin-right: 3vw;
    color: #333;
  }
  
  .header-title {
    font-size: 4vw;
    color: #333;
    flex: 1;
    text-align: center;
    margin-right: 8vw;
  }
  
  .login-container {
    padding: 8vw 6vw;
  }
  
  .logo-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 12vw;
  }
  
  .logo {
    width: 20vw;
    height: 20vw;
    margin-bottom: 3vw;
  }
  
  .logo-text {
    font-size: 5vw;
    color: #333;
    font-weight: 500;
  }
  
  .login-input {
    margin-bottom: 4vw;
  }
  
  .login-input :deep(.el-input__wrapper) {
    background: #f5f7fa;
    border: none;
    padding: 3vw 4vw;
  }
  
  .agreement {
    margin: 4vw 0;
  }
  
  .agreement-checkbox {
    --el-checkbox-font-size: 3.2vw;
  }
  
  .agreement-text {
    color: #666;
    font-size: 3.2vw;
  }
  
  .link {
    color: #409eff;
  }
  
  .login-button {
    width: 100%;
    padding: 3vw;
    font-size: 4vw;
    border-radius: 1vw;
    margin-top: 4vw;
  }
  
  .action-links {
    margin-top: 4vw;
    text-align: center;
    font-size: 3.2vw;
    color: #409eff;
  }
  
  .divider {
    margin: 0 3vw;
    color: #ddd;
  }
  
  :deep(.el-input__inner) {
    height: 11vw;
    font-size: 3.8vw;
  }
  
  :deep(.el-input__prefix-inner) {
    font-size: 5vw;
    color: #999;
  }
  </style>